<template>
	<div>
		<show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"  @selectView="selectView"></show-view-path>
		<div style="height: 100%" :ref="config.key"></div>
	</div>
</template>

<script>
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';
import StaticDataFunc from "./static-data-func";

/**
 * 面积图
 */
export default {
	name: "areaChart-view",
	mixins:[ChartPublic,ChartStyle,StaticDataFunc],
	data() {
		return {
			chartType:"line"
		}
	},
	methods: {
		setOption(){
			//图例组件
			let legend = [];
			//图例组件配置
			let legendArr = [];
			//直角坐标系 grid 中的 x 轴
			let xAxis = {};
			//x轴维度配置
			let xAxisArr = [];
			//yAxis直角坐标系 grid 中的 y 轴
			//yAxis直角坐标系 grid 中的 y 轴
			let yAxis="";
			//双Y轴
			if(this.config.styles.yAxisShow2){
				yAxis=[];
				//第一Y轴
				let yAxis1=  {type: 'value',axisLine:{show:false}};
				if(this.config.styles){
					yAxis1['show'] = this.config.styles.yAxisShow
				}
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis1,this.config.styles.yGrid)
				//修改y轴颜色
				this.chartYlineStyle(yAxis1,this.config.styles.yAxisConfig);
				yAxis.push(yAxis1);

				//第一Y轴
				let yAxis2=  {type: 'value',axisLine:{show:false}};
				//修改y轴样式风格
				//判断是否隐藏Y轴
				if(this.config.styles){
					yAxis2['show'] = this.config.styles.yAxisShow2
				}
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis2,this.config.styles.yGrid)
				//修改y轴颜色
				this.chartYlineStyle(yAxis2,this.config.styles.yAxisConfig2,this.config.dataSources.measures2);
				yAxis.push(yAxis2);
			}else {
				yAxis=  {type: 'value',axisLine:{show:false}};
				//修改y轴样式风格
				//判断是否隐藏Y轴
				if(this.config.styles){
					yAxis['show'] = this.config.styles.yAxisShow
				}
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis,this.config.styles.yGrid)
				//修改y轴颜色
				this.chartYlineStyle(yAxis,this.config.styles.yAxisConfig)
			}
			/**
			 *系列列表
             [{name: 名称,
             type: 类型,
             data: 数据 []
             }]
			 */
			let series = [];
			//静态数据模式
			if(this.config.dataSources.source=="static"){
				if(this.config.dataSources.staticData){
					//静态数据
					let staticData=JSON.parse(this.config.dataSources.staticData);
					for (let i = 0; i < staticData.series.length; i++) {
						staticData.series[i].type=this.chartType;
						staticData.series[i].areaStyle= {};
						if(staticData.series[i].name){
							legend.push(staticData.series[i].name);
						}
					}
					xAxis= {
						type: 'category',
						data: staticData.categories,
						show:this.config.styles.xAxisShow,
						axisLine: {
							show: true,
							lineStyle: {
								color:this.config.advancedConf.xAxisColor?this.config.advancedConf.xAxisColor:"#333"
							}
						},
					}
					//修改x轴颜色
					this.chartXlineStyle(xAxis);
                    series= this.initStaticSeries(staticData.series)
				}
			}else {
				//获取维度
				xAxis=this.getDimensions(xAxisArr);
				//判断是否隐藏x轴
				if(this.config.styles){
					xAxis.show = this.config.styles.xAxisShow
				}
				//修改x轴颜色
				this.chartXlineStyle(xAxis)
				//未配置颜色图例
				if(this.config.dataSources.colorLegends.length==0){
					//获取度量
					//获取度量
					this.calculateMeasures(this.config.dataSources.measures,legend,series);
					//双Y轴
					if(this.config.styles.yAxisShow2){
						this.calculateMeasures(this.config.dataSources.measures2,legend,series,1);
					}
				}else {
					//根据颜色图例与度量获取图例组件
					for (let i = 0; i < this.config.dataSources.colorLegends.length; i++) {
						let colorLegend = this.config.dataSources.colorLegends[i];
						let fieldName=colorLegend.tableName?colorLegend.tableName+'_'+colorLegend.fieldName:colorLegend.fieldName;
						for (let j = 0; j < this.config.dataSources.measures.length; j++) {
							let measure = this.config.dataSources.measures[j];
							for (let k = 0; k < this.data.length; k++) {
								let colorValue =this.getColorValue(this.data[k],colorLegend,measure);
								let number = legend.indexOf(colorValue);
								if(number==-1){
									legend.push(colorValue);
									legendArr.push({
										key:measure.tableName?measure.tableName+"_"+measure.fieldName:measure.fieldName,
										fieldName:fieldName,
										value:this.data[k][fieldName]
									})
								}
							}
						}
					}
					for (let i = 0; i < legendArr.length; i++) {
						let legendObj=legendArr[i];
						let array=[];
						for (let j = 0; j < xAxisArr.length; j++) {
							let val=0;
							for (let k = 0; k < this.data.length; k++) {
								let xAxisObj=xAxisArr[j];
								if(this.config.dataSources.dimensions.length>1){
									let xAxisKeys = xAxisObj.key.split("-");
									let xAxisVal="";
									for (let l = 0; l < xAxisKeys.length; l++) {
										if(l!=0){
											xAxisVal+="-";
										}
										let xVal = this.data[k][xAxisKeys[l]];
										//维度配置了字段渲染
										if(typeof(xVal)!='string'){
											xVal=xVal.oldValue;
										}
									}
									if(xAxisVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
										val=this.data[k][legendObj.key];
										break;
									}
								}else {
									let xVal = this.data[k][xAxisObj.key];
									//维度配置了字段渲染
									if(typeof(xVal)!='string'){
										xVal=xVal.oldValue;
									}
									if(xVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
										val=this.data[k][legendObj.key];
										break;
									}
								}

							}
							array.push(val)
						}

						let obj={
							name: legend[i],
							type:this.chartType,
							data:array,
							areaStyle: {},
							symbolSize:this.config.styles.lineConfig.size,
							symbol:this.config.styles.lineConfig.type,
							smooth:this.config.styles.lineConfig? this.config.styles.lineConfig.smoothCurve:false,//平滑曲线
							itemStyle:{
								normal: {
									lineStyle:{
										width:this.config.styles.lineConfig.width,
									}
								}
							}
						}
						//获取预警线数据和样式
						let markLine = {
							type: 'bar',
							silent: true, //基线显示 隐藏
							symbol: 'none', // 不显示箭头和圆点
							data:this.markLine(array),//获取属性样式
						}

						obj['markLine'] = markLine
						series.push(obj);
					}
				}
			}
            let dataZoom = [];
            if(this.config.styles.dataZoomShow && xAxis.data.length>this.config.styles.dataZoom.numeral){
                //X轴是否滚动
                dataZoom.push({
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: this.config.styles.dataZoom.start, // 初始范围的起始百分比
                    end: this.config.styles.dataZoom.end // 初始范围的结束百分比
                });
                if(this.config.styles.insideShow){
                    dataZoom.push({
                        type: 'inside',
                        start:this.config.styles.inside.start,
                        end: this.config.styles.inside.end
                    })
                }
            }
			this.option={
				tooltip:this.chartTooltip(),//提示框的样式修改
				grid:this.chartGrid(),//grid离容器的边距设置
				toolbox:this.chartToolbox(),//工具栏目配置
				color:this.getColors(),
				legend: this.chartLegend(legend),//图例
				xAxis:xAxis,
				yAxis: yAxis,
				series: series,
                dataZoom:dataZoom
			};

		},
		calculateMeasures(measures,legend,series,yAxisIndex){
			//获取度量
			for (let i = 0; i < measures.length; i++) {
				let array=[];
				let measure = measures[i];
				let fieldName=measure.tableName?measure.tableName+'_'+measure.fieldName:measure.fieldName;
				legend.push(measure.fieldLabel);
				for (let j = 0; j < this.data.length; j++) {
					let value= this.data[j][fieldName];
					if(value){
						array.push(value);
					}else {
						array.push(0);
					}
				}
				let obj={
					name: measure.fieldLabel,
					type:this.chartType,
					data:array,
					areaStyle: {},
					symbolSize:this.config.styles.lineConfig.size,
					symbol:this.config.styles.lineConfig.type,
					smooth:this.config.styles.lineConfig? this.config.styles.lineConfig.smoothCurve:false,//平滑曲线
					itemStyle:{
						normal: {
							lineStyle:{
								width:this.config.styles.lineConfig.width,
							}
						}
					}
				}
				if(yAxisIndex){
					obj.yAxisIndex=yAxisIndex;
				}
				//获取预警线数据和样式
				let markLine = {
					type: 'bar',
					silent: true, //基线显示 隐藏
					symbol: 'none', // 不显示箭头和圆点
					data:this.markLine(array),//获取属性样式
				}
				obj['markLine'] = markLine
				series.push(obj);
			}
		}
	},
}
</script>

<style scoped>
</style>
